<template>
<!--咨询预约--><div class="about">
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="用户" style="margin-top: 20px;margin-left: 20px">
      <el-input v-model="queryInfo.author" placeholder="请输入用户关键字" clearable/>
    </el-form-item>
    <el-form-item style="margin-top:20px">
      <el-button type="primary" @click="getList">搜索</el-button>
    </el-form-item>
  </el-form>
  <div class="mb20">
    <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
    <el-button type="danger" icon="Delete" plain>删除</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"/>
    <el-table-column fixed prop="id" label="ID" width="120"/>
    <el-table-column prop="createtime" label="咨询时间" width="120"/>
    <el-table-column prop="content" label="咨询内容" width="120"/>
    <el-table-column prop="consultId" label="咨询师" width="120"/>
    <el-table-column prop="userId" label="用户id" width="90"/>
    <el-table-column prop="reply" label="回复信息" width="160"/>
    <el-table-column prop="status" label="是否" width="180"/>
    <el-table-column fixed="right" label="编辑" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
        <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
  <el-pagination style="margin-top: 10px"
                 v-model:current-page="queryInfo.pageNum"
                 v-model:page-size="queryInfo.pageSize"
                 :page-sizes="[1, 5, 10, 20]"
                 size="default"
                 background="false"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
  />

  <!-- 添加，编辑弹框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="user">
      <!--      <el-form-item label="编号" :label-width="formLabelWidth">-->
      <!--        <el-input v-model="user.id" autocomplete="off" />-->
      <!--      </el-form-item>-->

      <el-form-item label="时间" :label-width="formLabelWidth">
        <el-input v-model="user.createTime" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="user.content" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="咨询id" :label-width="formLabelWidth">
        <el-input v-model="user.consultId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="用户id" :label-width="formLabelWidth">
        <el-input v-model="user.userId" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="回复" :label-width="formLabelWidth">
        <el-input v-model="user.reply" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="所属分类编号" :label-width="formLabelWidth">
        <el-input v-model="user.tid" autocomplete="off"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate">
          {{ saveOrUpdateTitle }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox,} from 'element-plus'

import axios from 'axios'
//定义一个全局路径
const url = ref('http://localhost:8080/file/downLoad?fileName=');

//图片上传
const imageUrl = ref('');
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  //一旦上传成功，就把图片路径赋值给article.imageUrl
  // article.value.imageUrl =response.data;
  console.log('response',response);
  console.log('uploadFile',uploadFile);
}

// 定义一个方法当页面加载后立马执行的代码
onMounted(() => {
  // console.log('onMounted');
  getList();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
  pageNum: 1,
  pageSize: 5,
  name: '',
  author: ''
})
//定义一个数据总条数
const total = ref(0);

//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = () => {
  // 使用axios调用后端接口获取数据
  axios.get('/appointment/findAll', {
    params: queryInfo.value
  }).then(resp => {
    // console.log(resp.data)
    let result = resp.data;
    if (result.code == 1) {
      //更新总条数
      total.value = result.data.total;
      tableData.value = result.data.list;
      console.log(result.data.list);
    } else {
      console.log('获取文章列表失败')
    }
  })
}
// 分页
const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}


const formInline = reactive({
  name: '',
  state: '',
  date: '',
})

// 修改或添加
const saveOrUpdateVisible = ref(false);
const user = ref({
  id: 0,
  createtime: '',
  content: '',
  consultId: '',
  userId: '',
  reply: '',
  status: '',
})
const saveOrUpdateTitle = ref('添加');
// 去修改的页面
const toEdit = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  user.value = row;

}

// 去添加的页面
const toAdd = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  user.value = {
    id: 0,
    createtime: '',
    content: '',
    consultId: '',
    userId: '',
    reply: '',
    status: '',
  }
}

// 取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
  user.value = {
    id: 0,
    createtime: '',
    content: '',
    consultId: '',
    userId: '',
    reply: '',
    status: '',
  }
}

// 保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加') {
    // 调用后端接口添加
    axios.post('/add', user.value)
        .then(resp => {
          // console.log(resp.data)
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code == 1) {
            // 重新获取列表
            getList();
          } else {
            console.log('添加用户失败')
          }
        })
  } else {
    // 调用后端接口修改
    axios.put('/update', user.value)
        .then(resp => {
          // console.log(resp.data)
          let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
          if (result.code == 1) {
            // 重新获取列表
            getList();
          } else {
            console.log('修改用户失败')
          }
        })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  imageUrl.value = '';
  user.value = {
    id: 0,
    createtime: '',
    content: '',
    consultId: '',
    userId: '',
    reply: '',
    status: '',
  }
}

// 删除
const onDel = id => {
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 调用后端接口删除数据
        axios.delete('/delete/' + id)
            .then(resp => {
              // console.log(resp.data)
              let result = resp.data;
              if (result.code == 1) {
                // 重新获取数据
                getList();
                ElMessage({
                  message: '删除成功！',
                  type: 'success',
                })
              } else {
                ElMessage({
                  message: '删除失败！',
                  type: 'error',
                })
              }
            })
      })
      .catch(() => {
      })
}
// 弹框
const showPop = ref(false);
// 默认添加
const isEdit = ref(false);
const dicid = ref(0);
// 添加


// 弹框关闭
const onCancel = () => {
  // 展示弹框
  showPop.value = false;
}


const onSubmit = () => {
  console.log('submit!')
}
const tableData = ref([

])
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1.5px solid rgb(133, 133, 136);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>